<template>
	<div class="showBox" :style="{'height':'auto'}">
		<quill-editor v-model="Value" 
		ref="myQuillEditor" 
		:options="editorOption" 
		class="editor"></quill-editor>
	</div>
</template>

<script>
	// import "@/styles/quill.core.css"
	// import '@/styles/quill.snow.css'
	// import '@/styles/quill.bubble.css'
	
	 import 'quill/dist/quill.core.css'
	  import 'quill/dist/quill.snow.css'
	  import 'quill/dist/quill.bubble.css'
	
	//加入以下引用
	import Quill from "quill";
	import ImageResize from "quill-image-resize-module"; // 引用
	import {
		ImageDrop
	} from "quill-image-drop-module";
	Quill.register("modules/imageDrop", ImageDrop);
	Quill.register("modules/imageResize", ImageResize); // 注册
	
	import Video from './video'
	Quill.register(Video, true);
	
	import {
		quillEditor
	} from 'vue-quill-editor'

	// 工具栏配置
	const toolbarOptions = [
		["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
		[{
			list: "ordered"
		}, {
			list: "bullet"
		}], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
		[{
			script: "sub"
		}, {
			script: "super"
		}], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
		[{
			indent: "-1"
		}, {
			indent: "+1"
		}], // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
		[{
			size: ["small", false, "large", "huge"]
		}], // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
		[{
			header: [1, 2, 3, 4, 5, 6, false]
		}], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
		[{
			color: []
		}, {
			background: []
		}], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
		[{
			align: []
		}], // 对齐方式-----[{ align: [] }]
		["clean"], // 清除文本格式-----['clean']
		["image", "video"] // 链接、图片、视频-----['link', 'image', 'video']
	];
	export default {
		name: "Editor",
		components: {
			quillEditor,
		},
		props:{
			content:String,
			width:String,
			height:String
		},
		data() {
			return {
				Value:this.content,
				uniqueId: "uniqueId",
				editorOption: {
					theme: "snow",
					placeholder: "",
					modules: {
						imageDrop: true,
						imageResize: {
							displayStyles: {
								backgroundColor: "black",
								border: "none",
								color: "white"
							},
							modules: ["Resize", "DisplaySize", "Toolbar"]
						},
						//  富文本编辑器配置
						toolbar: {
							container: toolbarOptions
						}
					}
				}
			};
		},
		watch:{
			content(n,o){
				this.Value = n
			}
		},
		computed: {
			//当前富文本实例
			editor() {
				return this.$refs.myQuillEditor.quill;
			}
		},
		methods: {
			
		},
		mounted() {
			this.$refs['myQuillEditor'].quill.enable(false) 
		}
	}
</script>

<style lang='scss' scoped>
	.showBox{
		margin: 0 auto;
	}
	
	.editor {
		line-height: normal !important;
		width: 100%;
		height: 100%;
		text-align: left;
		/deep/ img{
			pointer-events: none;
		}
		/deep/.ql-editor{
			/* background: #161330;
			border: 1px solid #1172D4;
			border-top: none;
			box-shadow: 0px 0px 5px 0px rgba(22, 19, 48, 0.57); */
			width: 100%;
			height: auto;
			border:none
		}
		/deep/.ql-editor p{
			width: 100% !important;
		}
		
		/deep/.ql-container.ql-snow{
			 height: auto !important;
			 border:none
		}
		/deep/.ql-toolbar.ql-snow{
			/* height: 50px; */
			display: none;
		}
		/deep/.ql-editor .ql-video {
		    width: 30%;
			min-width: 300px;
		    height: auto;
		}
		
		/deep/.ql-editor.ql-blank:before {
		  color: rgba(255, 255, 255, 0.3);
		  font-style: normal;
		}
		/deep/.ql-snow{
			width: 100%;
		}
		
		/deep/.ql-snow .ql-tooltip[data-mode="link"]::before {
			content: "请输入链接地址:";
		}

		/deep/.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
			border-right: 0px;
			content: "保存";
			padding-right: 0px;
		}

		/deep/.ql-snow .ql-tooltip[data-mode="video"]::before {
			content: "请输入视频地址:";
		}

		/deep/.ql-snow .ql-picker.ql-size .ql-picker-label::before,
		/deep/.ql-snow .ql-picker.ql-size .ql-picker-item::before {
			content: "14px";
		}

		/deep/.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
		/deep/.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
			content: "10px";
		}

		/deep/.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
		/deep/.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
			content: "18px";
		}

		/deep/.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
		/deep/.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
			content: "32px";
		}

		/deep/.ql-snow .ql-picker.ql-header .ql-picker-label::before,
		/deep/.ql-snow .ql-picker.ql-header .ql-picker-item::before {
			content: "文本";
		}

		/deep/.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
		/deep/.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
			content: "标题1";
		}

		/deep/.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
		/deep/.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
			content: "标题2";
		}

		/deep/.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
		/deep/.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
			content: "标题3";
		}

		/deep/.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
		/deep/.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
			content: "标题4";
		}

		/deep/.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
		/deep/.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
			content: "标题5";
		}

		/deep/.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
		/deep/.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
			content: "标题6";
		}

		/deep/.ql-snow .ql-picker.ql-font .ql-picker-label::before,
		/deep/.ql-snow .ql-picker.ql-font .ql-picker-item::before {
			content: "标准字体";
		}

		/deep/.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
		/deep/.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
			content: "衬线字体";
		}

		/deep/.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
		/deep/.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
			content: "等宽字体";
		}
	}
</style>
